<template>
    <!-- 卡片框 -->
      <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home_Ad' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      </el-breadcrumb>
       <div class="searchBox">
             <!-- 添加按钮 -->
            <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable style="width:500px;margin-right:5px">
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="search">查找</el-button>
        </div>
       <!-- 表格区域 -->
           <el-table
            :data="commentList"
            border stripe fit
            empty-text='null'
            class="userTable"
            style="width: 100%;margin-top:12px">
            <el-table-column type="index" label="#" width="40"></el-table-column>
            <el-table-column  prop="comId" label="评论编号" width="80"></el-table-column>
            <el-table-column prop="nickName" label="评论用户" width="180">  </el-table-column>
            <el-table-column prop="sname"  label="评论球馆" width="200"></el-table-column>
            <el-table-column prop="dateTime"  label="评论时间" width="200"></el-table-column>
            <el-table-column prop="content"  label="评论内容" width=""></el-table-column>
             <el-table-column  label="操作" width="200">
                 <template slot-scope="scope">
                         <el-button type="danger"  icon="el-icon-delete" size="medium" @click="deletComment(scope.row)">删除评论</el-button>   
                 </template>
            </el-table-column>  
            

           </el-table>
            <Pagination :pageSize="pagination.pageSize" :total="pagination.total" :pageNo="pagination.currentPage" :continues=5 @getPageNo="goToPageNo" />
      </el-card>
</template>

<script>
import {mapGetters} from 'vuex';
import Api from '../../api';

export default {
    data() {
        return {
            query:'',
            // 评论数据列表
            commentList:[],
            // 分页器参数
            pagination:{
                currentPage:'',
                pageSize:'',
                total:''
            },
        }
    },
      watch:{
      query(newVal,oldVal){
        if(newVal === '' && oldVal!== ''){
            this.getCommentList();
       }
      }
    },
    computed:{
        ...mapGetters({commentListData:'commentListByPage'})
    },
    created(){
        this.getCommentList();
    },
    methods: {
       // 获取评论信息
       getCommentList(){
           this.$store.dispatch('getCommentListByPage',this.pagination).then(ok=>{
               if(ok){
                   this.commentList = this.commentListData.data;
                   this.pagination = this.commentListData.pagination;
               }
           })
       },
       // 跳转到其他页码回调
        goToPageNo(pageNo){
            this.pagination.currentPage = pageNo;
            if(this.query){
             this.search();
            }else
             this.getCommentList();
        },
       // 删除评论的回调
       deletComment(comment){
            this.$confirm('此操作将永久删除该条评论, 是否继续?', '提示', {
            confirmButtonText: '确定',
            showCancelButton:true,
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                this.$store.dispatch('deleteCommentData',comment.comId).then(ok=>{
                    if(ok){
                    this.$message.success('删除成功');
                    this.getCommentList();
                    }
                })           
              
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        // 关键字搜索
        async search(){
          if(this.query){
         
            const {data:res} = await Api.searchCommentList({query:this.query,pagination:this.pagination})
              if(res.status !== 200) return this.$message.warning(`抱歉没有找到相关评论！`);
                this.$message.success(`已为您找到${res.data.pagination.total}个相关球馆！`)
                this.commentList = res.data.data;
                this.pagination = res.data.pagination;
            }else{
                this.$message.warning('请输入关键词');
            }
        }
       }   
        
    
}
</script>

<style scoped lang="less">
  .el-card{
    .searchBox{
        margin-top: 20px;
        display: flex;
        
    }
  }
 
</style>